<template>
  <scroll-view
    class="video_main"
    scroll-y
    enable-flex
    @scrolltolower="handleToLower"
  >
    <view class="video_item" v-for="item in videowp" :key="item.id" @click="handleVideo(item)">
      <image mode="widthFix" :src="item.img"></image>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      videowp: [],
      hasMore: true,
    };
  },
  props: {
    urlObj: Object,
  },
  watch: {
    urlObj() {
      this.videowp = [];
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: this.urlObj.url,
        data: this.urlObj.params,
      }).then((res) => {
        if (res.res.videowp.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "已是最后一页",
            icon: "none",
          });
          return;
        }
        this.videowp = [...this.videowp, ...res.res.videowp];
      });
    },
    handleToLower() {
      if (this.hasMore) {
        this.urlObj.params.skip += this.urlObj.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "已是最后一页",
          icon: "none",
        });
      }
    },
    handleVideo(item){
        getApp().globalData.video=item;
        uni.navigateTo({
            url:"/pages/videoPlay/index"
        })
    }
  },
};
</script>

<style lang="scss" scoped>
.video_main {
  height: calc(100vh - 36px);
  display: flex;
  flex-wrap: wrap;
  padding: 0 5rpx;
  .video_item {
    width: 33.33%;
    border: 5rpx #fff solid;
  }
}
</style>